<!doctype html>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="shortcut icon" href="../favicon.ico">	
		<style type="text/css">
      * {
        touch-action: pay-y;
      }
			body{
				font-family:Arial, Helvetica, sans-serif, 微软雅黑;
			}
			#content{
				font-size:15px;
				padding:0px;
				margin:0px;
			}
			img{
				margin:0px;padding:0px;
				width: 70px;height:70px;
			}
		</style>
    <script type="text/javascript">
      $(function() {
        $('#second').on('pageinit', function() {
          console.log("second pageinit");
          });
        $('#second').on('pagecreate', function() {
          console.log("second pagecreate");
          $('#addToStorage').click(function() {
            //存储
            localStorage.orideritem=$("select#selectitem").val();
            localStorage.flavor=$('input[name="flavoritem"]:checked').val();
            localStorage.num=$('#num').val();
            //转换到第3个页面
            $.mobile.changePage($('#third'), {transition: 'slide'});
          });
        });
        
        $('#third').on('pageinit', function() {
          var itemflavor = "甜品种类："+localStorage.orideritem+"<br />口味："+localStorage.flavor+"<br />数量："+localStorage.num;
          $('#message').html(itemflavor);
        });
      });
      
    </script>
	</head>
	<body>
		<div data-role="page" data-title="选择甜点" id="first" data-theme="a" data-add-back-btn="true">
			<div data-role="header">
				<a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">
					Back
				</a>
				<h1>选择甜品</h1>
			</div>
			<div data-role="content" id="content">
				<ul data-role="listview" data-inset="true" data-filter="true">
					<li>
						<a href="#second">
							<img src="images/img6.png" />
							<h3>巧克力</h3>
							<p>巧克力采顶级可可粉制作，入口即化。</p>
							<a href="#second" data-icon="gear"></a>
						</a>
					</li>
					<li>
						<a href="#second">
							<img src="images/img5.png" />
							<h3>饼干</h3>
							<p>饼干低糖、低脂香气迷人。</p>
							<a href="#second" data-icon="gear"></a>
						</a>
					</li>
					<li>
						<a href="#second">
							<img src="images/img4.png" />
							<h3>蛋糕</h3>
							<p>蛋糕精选高级巧克力奶油。</p>
							<a href="#second" data-icon="gear"></a>
						</a>
					</li>
					<li>
						<a href="#second">
							<img src="images/img3.png" />
							<h3>面包</h3>
							<p>面包制作天然不含任何添加剂。</p>
							<a href="#second" data-icon="gear"></a>
						</a>
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed" style="text-align:center">
				订购专线：45454545
			</div>
		</div>
		
		<div data-role="page" data-title="选择甜点" id="second" data-theme="a" data-add-back-btn="true">
			<div data-role="header">
				<a href="#first" data-icon="arrow-l" data-iconpos="left" data-ajax="false">
					Back
				</a>
				<h1>选择甜品</h1>
			</div>
			<div data-role="content" id="content">
				<select name="selectitem" id="selectitem">
					<option value="红色包装">红色包装</option>
					<option value="黄色包装">黄色包装</option>
					<option value="蓝色包装">蓝色包装</option>
				</select>
				<fieltset data-role="controlgroup">
					<legend>选择口味：</legend>
					<input type="radio" name="flavoritem" id="radio-choice-1" value="核桃" checked/>
					<label for="radio-choice-1">核桃</label>
					
					<input type="radio" name="flavoritem" id="radio-choice-2" value="花生"/>
					<label for="radio-choice-2">花生</label>
					
					<input type="radio" name="flavoritem" id="radio-choice-3" value="红枣"/>
					<label for="radio-choice-3">红枣</label>
				</fieltset>
				订购数量：<br />
				<input type="range" name="num" id="num" value="1" min="0" max="100" data-highlight="true" />
				<input type="button" id="addToStorage" value="送出订购" />
			</div>
			<div data-role="footer" data-position="fixed" style="text-align:center">
				订购专线：45454545
			</div>
		</div>
    
    <div data-role="page" data-title="订购完成" id="third" data-theme="a" data-add-back-btn="true">
    	<div data-role="header">
    		<a href="index.html" data-icon="arrow-l" data-iconpos="left" data-ajax="false">
    			回首页
    		</a>
        <h1>订购完成</h1>
    	</div>
    	<div data-role="content" id="content">
        <div id="message"></div>
    	</div>
    	<div data-role="footer" data-position="fixed" style="text-align:center">
    		订购专线：45454545
    	</div>
    </div>
    
	</body>
</html>